<template>
    <div class="mainMessage">
        <div class="top">
            <p>评论</p>
            <p>共留下<span>{{messageNum.sum_list}}</span>个足迹</p>
        </div>

        <div v-for="(item,index) in message_info" :key="index">
        <MessageItem>
            <p class="top" slot="top">{{is_new(index)}}</p>

            <div class="img" slot="img">
                <img :src="require('@/assets/img/common/life/user'+Math.ceil(Math.random()*12+1)+'.jpg')" width="50">
            </div>

            <div class="c-item">
                <div class="time">
                    <p>{{item.leaveName}}</p>
                    <p>{{item.leaveTime}}</p>
                </div>

                <div class="text">
                    <p>{{item.leaveText}}</p>
                </div>
            </div>

             <div class="m-btn">
                <p><a href="javascript:;">站长回复:</a>{{item.reply}}</p>
            </div>

        </MessageItem>
        </div>

    <div class="bottom">
        <p><a href="javascript:;" @click="moreMessage">查看更多</a></p>
    </div>

    </div>
</template>

<script>
import {get_message} from '@/network/message/message'
import MessageItem from './messageItem'
export default {
    name:'mainMessage',
    components:{
        MessageItem
    },
    data(){
        return{
            message_info:'',
            page:1,
            messageNum:''
        }
    },
    computed:{
        is_new(){
            //计算属性传参需要闭包
            return function(index){
                let new_text ='11'
                if(index < 3){
                    new_text = '最新评论'
                 }else{
                    new_text ='评论'
                }

                return new_text
            }
            
        }
    },
    methods:{
        moreMessage(){
            this.page++
        }
    },
    created(){
        get_message().then(res => {
            this.messageNum = res.data.result.pop()
            this.message_info = res.data.result
            //console.log(this.messageNum)
        }).catch( err => {
            console.log(err)
        })
    },
    watch:{
        page(newValue){
             get_message(newValue).then(res => {
                res.data.result.pop()
                if(newValue>this.messageNum.num_page){
                    alert('没有更多数据了')
                }else{
                    res.data.result.forEach( (item,index) => {
                        this.message_info.push(item)
                    })
                }
            }).catch( err => {
                console.log(err)
            })
        }
    }
}
</script>

<style scoped>
.mainMessage{
    width: 1000px;
    margin: 0 auto;
    background: #ffffff;
    padding-bottom:20px;
}
.mainMessage .top{
    margin-top: 30px;
    width: 100%;
    display: flex;
}
.mainMessage .top p:nth-child(1){
    flex: 1;
    font-size: 20px;
    font-weight: bold;
    color: #8BBF5D;
    margin-left: 20px;
}
.mainMessage .top p:nth-child(2){
    flex: 10;
    border-bottom: 1px solid red;
    font-size: 16px;
    font-weight: 600;
    text-align: right;
    margin-right: 20px;
}
.mainMessage .top p:nth-child(2) span{
    font-size: 25px;
    color: red;
    font-weight: bold;
}
.mainMessage .bottom{
    margin: 30px 20px;
    height: 30px;
    background: #fef6f6;
}
.mainMessage .bottom p{
    text-align: center;
    line-height: 30px;
}
.mainMessage .bottom p a{
    color: rgb(122, 101, 101);
    font-size: 14px;

}
</style>